import React, { useMemo } from 'react';
import { PropTypes } from 'prop-types';
import './style.less';

const TIPS = {
  100: 'Page is not ready',
  300: 'Application is launching',
  301: 'Application is initializing',
  302: 'Resource is loading',
  403: 'No access to visit',
  404: 'Oops, page is not found'
}

const BlankPage = (props) => {
  const { code, children } = props;
  
  const content = useMemo(() => {
    return children || (
      <React.Fragment>
        { TIPS[code] || code}
      </React.Fragment>
    )
  }, [code, children]);

  return (
    <div className="blank-page">{content}</div>
  )
}

BlankPage.propTypes = {
  code: PropTypes.number,
  children: PropTypes.any
};

BlankPage.defaultProps = {
  code: 404,
  children: undefined
}

export default BlankPage;